<template>
  <!-- 页脚最外层：宽度 1420px，水平居中，顶部留 40px 边距 -->
  <div class="footer-wrapper">
    <div class="container">
      <!-- 链接组：flex 布局，横向间距 32px，纵向间距 32px，移动端居中，≥1024px 时两端对齐 -->
      <div class="footer-grid">
        <div
          v-for="(group, index) in footerGroups"
          :key="index"
          class="footer-group"
        >
          <!-- 组标题：粗体，底部留 40px 间距 -->
          <a :href="footerLinks[index]?.url" class="group-title">
            {{ footerLinks[index]?.text }}
          </a>

          <!-- 组内链接：每项底部留 8px（移动端 16px）间距 -->
          <div v-for="(item, i) in group" :key="i" class="group-item">
            <a :href="item.url">{{ item.text }}</a>
          </div>

          <!-- “联系我们”组专属：邮箱订阅 + 社交图标占位 -->
          <template v-if="footerLinks[index]?.text === '联系我们'">
            <div class="subscribe">
              <input type="email" placeholder="邮箱" class="subscribe-input" />
              <button class="subscribe-btn"></button>
            </div>
            <!-- 社交图标区域 -->
            <div class="social-icons">
              <!-- 这里放图标 -->
            </div>
          </template>
        </div>
      </div>

      <!-- 分割线：高度 2px，灰色 -->
      <div class="divider"></div>

      <!-- 版权信息 -->
      <div class="copyright">
        Copyright © 2025-2025 International SpermandEggBank INC. AllRights
        Reserved.
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const baseUrl = import.meta.env.VITE_APP_OUT_API;

/* 五组大标题 */
const footerLinks = ref([
  { text: "成为捐赠者", url: `${baseUrl}/donors` },
  { text: "成为准父母", url: `${baseUrl}/parents-to-be` },
  { text: "关于我们", url: `${baseUrl}/about` },
  { text: "其它" },
  { text: "联系我们" },
]);

/* 每组对应的子链接 */
const footerGroups = [
  [
    { text: "我要捐精", url: `${baseUrl}/sperm` },
    { text: "我要捐卵", url: `${baseUrl}/egg` },
    { text: "资质认证", url: `${baseUrl}/qualifications` },
    { text: "捐献流程", url: `${baseUrl}/process` },
    { text: "捐献选项", url: `${baseUrl}/type` },
  ],
  [
    { text: "捐献选项", url: `${baseUrl}/method` },
    { text: "匹配过程", url: `${baseUrl}/match` },
    { text: "我要捐精", url: `${baseUrl}/fresh-frozen` },
    { text: "新鲜 vs 冷冻", url: `${baseUrl}/order` },
  ],
  [
    { text: "管理团队", url: `${baseUrl}/management` },
    { text: "医疗团队", url: `${baseUrl}/medical` },
    { text: "认证与许可", url: `${baseUrl}/authentication` },
    { text: "我们的优势", url: `${baseUrl}/advantage` },
  ],
  [
    { text: "成为合作伙伴", url: `${baseUrl}/partner` },
    { text: "常见问题", url: `${baseUrl}/question` },
  ],
  [
    { text: "捐献选项", url: `${baseUrl}/method` },
    { text: "匹配过程", url: `${baseUrl}/match` },
    { text: "新鲜 vs 冷冻", url: `${baseUrl}/fresh-frozen` },
    { text: "如何订购", url: `${baseUrl}/order` },
  ],
];
</script>

<style lang="scss" scoped>
/* 变量区：颜色、间距、断点 */
$color-text: #4d4d4d;
$color-primary: #2b5cab;
$color-divider: #d9d9d9;
$gap-x: 32px;
$gap-y: 32px;
$container-max: 1420px;
$breakpoint-lg: 1024px;

/* 最外层：1420px 水平居中，顶部 40px 边距 */
.footer-wrapper {
  width: 100%;
  max-width: $container-max;
  margin: 40px auto 0;
}

/* 内层容器：保证内容左右留空 */
.container {
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}

/* 链接组整体：flex 换行，横向/纵向间距，默认居中，≥1024px 时两端对齐 */
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  row-gap: $gap-y;
  column-gap: $gap-x;
  justify-content: center;

  @media (min-width: $breakpoint-lg) {
    justify-content: space-between;
  }
}

/* 每个分组 */
.footer-group {
  font-size: 16px;
  color: $color-text;
}

/* 组标题：粗体，底部 40px 间距 */
.group-title {
  display: block;
  font-weight: 700;
  margin-bottom: 40px;
  color: $color-text;
  text-decoration: none;
}

/* 组内子链接：每项底部 8px（移动端 16px） */
.group-item {
  margin-bottom: 8px;
  @media (max-width: 767px) {
    margin-bottom: 16px;
  }

  a {
    color: $color-text;
    text-decoration: none;
  }
}

/* 邮箱订阅行 */
.subscribe {
  display: flex;
  margin-bottom: 16px;
}

/* 邮箱输入框 */
.subscribe-input {
  width: 150px;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-right: 0;
  border-radius: 4px 0 0 4px;
  outline: none;
  box-sizing: border-box;

  @media (max-width: 767px) {
    width: 90px;
  }
}

/* 订阅按钮 */
.subscribe-btn {
  background: $color-primary;
  color: #fff;
  padding: 4px 24px;
  border: 0;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background 0.2s;

  &:hover {
    background: darken($color-primary, 8%);
  }
}

/* 社交图标占位 */
.social-icons {
  display: flex;
  gap: 8px;
}

/* 分割线 */
.divider {
  width: 100%;
  height: 2px;
  background: $color-divider;
  margin: 20px auto 0;
}

/* 版权信息 */
.copyright {
  font-size: 14px;
  color: $color-text;
  text-align: center;
  margin: 24px 0 32px;

  @media (min-width: 768px) {
    font-size: 16px;
    margin: 40px 0 48px;
  }

  /* 长单词换行 */
  overflow-wrap: break-word;
}
</style>
